<div #blocker style="position: absolute; top: 50%;"></div>
<ng-container *ngIf="userIn === true">
    <about-modal #aboutModal [showValidation]="true" titleName='About'></about-modal>
    <nav class="navbar navbar-inverse navbar-fixed-top" style="z-index:1000">

        <div class="container-fluid" style="padding-left: 0px">
            <!-- Brand and toggle get grouped for better mobile display -->

            <ul class="nav navbar-nav navbar-left">
                <li class="active">
                    <a role="button" style="z-index: 10000" class="glyphicon glyphicon-menu-hamburger" (click)="changeModeMenu()"></a>
                </li>
                <li class="active">
                    <svg role="text"
                       xmlns="http://www.w3.org/2000/svg"
                       xmlns:xlink="http://www.w3.org/1999/xlink"
                       width="100px" height="30px" style="overflow: visible; padding-top: 10px; margin-left: -60px;">
                      <image  x="0px" y="0px" width="356px" height="40px" style="height: 30px" xlink:href="data:img/png;base64,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" />
                  </svg>
                </li>
                <li class="active">
                    <p role="text" class="navbar-text" style="color: #fff; padding-top: 15px; font-size: 20px; margin: 0px 0px 0px 200px;" *ngIf="version">- {{version.InstanceID | uppercase}}</p>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="active">
                    <a role="button" href="javascript:void(0);" (click)="link('./#/docs')" >API</a>
                </li>
                <li class="active">
                    <a role="button" class="glyphicon glyphicon-info-sign" (click)="showAboutModal()"></a>
                </li>
                <li class="active">
                    <a href="javascript:void(0);" role="button" (click)="link('https://github.com/toni-moreno/snmpcollector/wiki')" class="glyphicon glyphicon-question-sign"></a>
                </li>
                <li class="active">
                    <a role="button" class="glyphicon glyphicon-off" (click)="logout()"></a>
                </li>
            </ul>
        </div>
        <!-- /.container-fluid -->
    </nav>

    <div id="wrapper">
        <!-- Sidebar -->
        <div id="sidebar-wrapper" [ngStyle]="mode === true ? {'width.px': '0'} : {'width.px': '215'}">
            <ul class="sidebar-nav">
                <li>
                    <span class="title-menu"><i class="glyphicon glyphicon-play" style="padding-right: 8px"></i>Runtime</span>
                </li>
                <li *ngFor="let menuItem of runtimeItems; let last=last" [ngClass]="last ? 'last-li' : ''">
                    <a (click)="clickMenu(menuItem.selector)" role="button" [ngClass]="item_type === menuItem.selector ? 'active-menu' : ''">{{menuItem.title}}</a>
                </li>
                <li>
                    <span class="title-menu"><i class="glyphicon glyphicon-cog" style="padding-right: 8px"></i>Configuration</span>
                </li>
                <li *ngFor="let menuItem of configurationItems; let last=last" [ngClass]="last ? 'last-li' : ''">
                    <a (click)="clickMenu(menuItem.selector)" role="button" [ngClass]="item_type === menuItem.selector ? 'active-menu' : ''">{{menuItem.title}}</a>
                </li>

                <li class="last-li">
                    <span class="title-menu"><i class="glyphicon glyphicon-indent-right" style="padding-right: 8px"></i> Data Management</span>
                    <a (click)="showImportModal()" role="button">Import Data</a>
                    <a (click)="showExportBulkModal()" role="button">Export Data</a>
                    <a (click)="reloadConfig()" role="button"> <i class="glyphicon glyphicon-refresh" style="display: inline; padding-left: 0px"> </i>Reload Config
                        <i *ngIf="elapsedReload" class="glyphicon glyphicon-ok-circle" container="body" [tooltip]="elapsed"></i>
                        <ng-template #elapsed>
            <p>Elapsed: {{ (elapsedReload / 1000000000) | elapsedseconds:3 }} </p>
            <p>Last Reload: {{lastReload}}</p>
          </ng-template>
                    </a>
                </li>
                <li>
                    <span class="title-menu"><i class="glyphicon glyphicon-question-sign" style="padding-right: 8px"></i>Others</span>
                </li>
                <li>
                    <a href="javascript:void(0);" role="button" (click)="link('./#/docs')" >API</a>
                </li>
                <li>
                    <a href="javascript:void(0);" role="button" (click)="link('https://github.com/toni-moreno/snmpcollector/wiki')" >Wiki</a>
                </li>
                <li>
                    <a role="button" (click)="showAboutModal()">About</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper" style="margin-bottom:50px" [ngStyle]="mode === true ? {'padding-left': '0px'} : {'padding-left' : '215px'}">
            <div class="container-fluid">
                <div class="row">
                    <import-file-modal #importFileModal [showValidation]="true" [textValidation]="'Import'" titleName='Importing:'></import-file-modal>
                    <export-file-modal #exportBulkFileModal [showValidation]="true" [bulkExport]="true" [prepareExport]="false" [textValidation]="'Export'" titleName='Exporting Data:'></export-file-modal>

                    <div class="col-lg-12">
                        <p [ngSwitch]="item_type">
                            <ng-template ngSwitchCase="influxserver">
                              <influxservers></influxservers>
                           </ng-template>
                            <ng-template ngSwitchCase="snmpmetric">
                               <snmpmetrics></snmpmetrics>
                            </ng-template>
                            <ng-template ngSwitchCase="measurement">
                             <measurement></measurement>
                           </ng-template>
                            <ng-template ngSwitchCase="measgroup">
                               <measgroups></measgroups>
                            </ng-template>
                            <ng-template ngSwitchCase="measfilter">
                              <measfilters></measfilters>
                            </ng-template>
                            <ng-template ngSwitchCase="oidcondition">
                              <oidconditions></oidconditions>
                            </ng-template>
                            <ng-template ngSwitchCase="customfilter">
                              <customfilters></customfilters>
                            </ng-template>
                            <ng-template ngSwitchCase="snmpdevice">
                             <snmpdevs></snmpdevs>
                           </ng-template>
                            <ng-template ngSwitchCase="runtime">
                              <runtime #RuntimeComponent></runtime>
                            </ng-template>
                            <ng-template ngSwitchCase="varcatalog">
                              <varcatalog></varcatalog>
                            </ng-template>
                            <ng-template ngSwitchDefault>DEFAULT</ng-template>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->
    </div>
    <!-- /#wrapper -->

</ng-container>
